layui.use(['jquery', 'table', 'layer', 'laytpl', 'echartsTheme'], function() {
	var $ = layui.jquery;
	var table = layui.table;
	var layer = layui.layer;
	var laytpl = layui.laytpl;
	var echartsTheme = layui.echartsTheme;

	var chart = echarts.init($('#chart').get(0), echartsTheme);
	var renderChart = function() {
		// layui的缓存不到9个时，说明尚未渲染完毕
		if (Object.keys(table.cache).length == 9) {
			// 获取QP以外的表格数据
			var array = [];
			for (var i = 2; i < 10; i++) {
				array = array.concat(table.cache[i]);
			}
			var names = [];
			var used = [];
			var hold = [];
			var totalNeed = [];
			var stillNeed = [];
			$.each(array, function() {
				names.push($(this.item).children('img').prop('alt'));
				used.push($(this.used).html());
				hold.push(this.hold);
				totalNeed.push($(this.totalNeed).html());
				stillNeed.push(this.stillNeed);
			});
			chart.setOption({
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['已用', '持有', '总需', '仍需']
				},
				xAxis: {
					type: 'category',
					data: names
				},
				yAxis: {
					type: 'value'
				},
				dataZoom: [{
					show: true,
					end: 9
				}, {
					type: 'inside',
					end: 9
				}],
				series: [{
					name: '已用',
					type: 'bar',
					barGap: 0,
					data: used
				}, {
					name: '持有',
					type: 'bar',
					stack: '堆叠',
					data: hold
				}, {
					name: '总需',
					type: 'bar',
					data: totalNeed
				}, {
					name: '仍需',
					type: 'bar',
					stack: '堆叠',
					data: stillNeed
				}]
			});
		}
	};
	var unzip = function(data) {
		var decode = window.atob(data);
		var charData = decode.split('').map(function(elt, i, array) {
			return elt.charCodeAt(0);
		})
		var binData = new Uint8Array(charData);
		var pakoData = pako.inflate(binData);
		var data = String.fromCharCode.apply(null, new Uint16Array(pakoData));
		return decodeURIComponent(data);
	};
	window.onresize = chart.resize;
	table.init('table', {
		limit: 100,
		skin: 'line',
		size: 'sm',
		done: function(res, curr, count) {
			renderChart();
		}
	});
	table.on('edit(table)', function(obj) {
		var value = obj.value;
		var data = obj.data;
		var field = obj.field;
		$.getJSON('save', {
			itemId: data.id,
			number: value
		}, function(result, textStatus, req) {
			if (result.state == 'ok') {
				// 成功
				layer.msg(result.msg, {
					icon: 6
				});
				var stillNeed = '';
				var hold = parseInt(data.hold);
				if (!isNaN(hold)) {
					var totalNeed = parseInt(layui.jquery(data.totalNeed).html());
					stillNeed = hold < totalNeed ? totalNeed - hold : 0;
				}
				// 更新仍需值
				obj.update({
					stillNeed: stillNeed
				});
				// 更新图表
				renderChart();
			} else {
				// 失败
				layer.msg(result.msg, {
					icon: 5,
					anim: 6
				});
			}
		})
	});
	// 详细数据展示
	$('.layui-table-view .show-data').each(function() {
		var $_self = $(this);
		var data = $_self.data('data');
		// 解压字符串
		data = unzip(data);
		// 转为对象
		var json = JSON.parse(data);
		if (json.number) {
			laytpl($('#showDataDetailTpl').html()).render(json.detail, function(html) {
				$_self.on('click', function() {
					layer.open({
						type: 1,
						shadeClose: true,
						area: '500px',
						title: json.name,
						content: html
					});
				});
			});
		}
	});
});